<template>
	<view>
		<!-- oinvoicing 开具发票 -->

		<view class="oicing_outer">
			<view class="oicing_tit">
				发票信息
			</view>
			<view class="oicing_content u-m-b-20">

				<view class="oicing_line FlexBetween" @click="seltaitouClick">
					<view class="tit">
						发票抬头
					</view>
					<view class="valuebox FlexAlign placetxt">
						{{invoice_info ? invoice_info.title : '请选择开具发票抬头'}}
						<i class="iconfont icon-xiangyoujiantou"></i>
					</view>
				</view>

			</view>


			<view class="oicing_content TotalAmount">
				<view class="amount_head FlexBetween" @click="amountDetail">
					<view class="head_left FlexAlign">
						<view class="tit">
							总金额
						</view>
						<view class="price FlexAlign">
							<view class="num">
								{{totalAmount}}
							</view>
							<view class="unit">
								元
							</view>
						</view>
					</view>
					<view class="rmore FlexAlign">
						共{{select_List.length}}张，查看详情
						<i class="iconfont icon-xiangyoujiantou"></i>
					</view>
				</view>
				<view class="amount_txt">
					此金额不包含高速费、停车费等附加费，附加费不可开票，如您需要附加费发票,请向相关收费站停车场索要。
				</view>
			</view>

			<view class="oicing_tit">
				接收方式
			</view>
			<view class="oicing_content">
				<view class="oicing_line FlexBetween">
					<view class="tit">
						电子邮箱
					</view>
					<view class="valuebox">
						<input type="text"
						 v-model="email"
						 placeholder="请输入电子邮箱" placeholder-class="myplaceholder">
					</view>
				</view>
				<!-- <view class="oicing_line FlexBetween">
					<view class="tit">
						发送行程单
					</view>
					<view class="valuebox">
						<view class="checkbox FlexRow ischeck">
							<i class="iconfont icon-duihao"></i>
						</view>
					</view>
				</view> -->
			</view>
			
			<view class="oicing_tit">
				备注信息
			</view>
			<view class="oicing_content notes_box">
				<view class="notes_head FlexBetween">
					<view class="head_left FlexAlign">
						<view class="tit">
							备注
						</view>
						<view class="txt">
							该内客将会打印在发票上
						</view>
					</view>
					<view class="fontNum">
						{{remark.length}}/80
					</view>
				</view>
				<textarea v-model="remark" maxlength="80" placeholder="按企业报销要求填写，如用车时间，用车原因（非必填）"
				
				></textarea>
				
				
			</view>

		</view>

		<view class="bottom_mask"></view>
		<view class="oicing_bottom">
			<view class="FlexRow defconfirm_btn gradient_bg4" @click="$u.throttle(oicinSubmit, 2000)">
				提交
			</view>
		</view>


		<!-- 弹窗 -->
		<pupovercoat ref="ref_invoic" :iscustom="true" 
		 :ThemeType="4"
		ptitle="开具电子发票" confirmtxt="确认提交" @saveclick="pupConfirm">
			<template slot="content">
				<view class="Issue_content">
					<view class="Issue_line FlexBox" v-for="(item, index) in IssueList">
						<view class="tit">
							{{item.title}}
						</view>
						<view class="value">
							{{item.value}}
						</view>
					</view>
					<view class="Issue_text">
						如无特殊情况，我们将在24小时内将发票发送至该邮箱。
					</view>
				</view>
			</template>
		</pupovercoat> 
		<!--  -->
		<!-- 选择发票抬头 -->
		<heaupalert ref="ref_halert" @selectcur="selectcur"></heaupalert>

	</view>
</template>

<script>
	import pupovercoat from "@/bundle4/components/pupovercoat.vue"
	import heaupalert from "./components/heaupalert.vue"
	// api
	import {
		api_invoice_apply,
	} from "@/api/xtcapi/invoice.js"
	export default {
		components: {
			pupovercoat,
			heaupalert,
		},
		data() {
			return {
				invoice_info: '',
				email: '',
				remark: '',
				IssueList: [],
				select_List: [],
				
				apply_data: '',
			}
		}, 
		onLoad() {
			this.initialization()
		},
		computed:{
			totalAmount(){
				let num = 0
				for(let item of this.select_List) {
					if(item.order_amount) {
						num += item.order_amount * 1
					}
				}
				return num
			},
		},
		methods: {

			// 页面初始化
			initialization() {
				// 发票选择的列表
				let selectList = uni.getStorageSync('invoic_select_list')
				if(selectList && typeof(selectList) == 'string') {
					this.select_List = JSON.parse(selectList)
				}
			},
			seltaitouClick(){
				if (this.$refs.ref_halert) {
					this.$refs.ref_halert.openPup()
				}
			},
			oicinSubmit() {
				if(!this.invoice_info) {
					this.$toast({
						title: '请选择发票抬头'
					})
					return
				}
				if(!this.email) {
					this.$toast({
						title: '请输入电子邮箱'
					})
					return
				}
				let ids = this.select_List.map(v=>{
					return v.id
				})
				let resData = {
					ids, // 订单id
					// [1,2,3]
					action: 'settle', // 动作
					// settle：结算，order：下单
					invoice_id: this.invoice_info.id, // 抬头id
					email: this.email, // 邮箱
					remark: this.remark, // 备注
				}
				// 申请开票
				api_invoice_apply(resData).then(res=>{
					this.apply_data = resData
					if (this.$refs.ref_invoic) {
						this.$refs.ref_invoic.pupshow = true
						let infos = this.invoice_info
						if(infos.title_type == 1) {  // 企业
							this.IssueList = [{
									title: '发票类型',
									value: infos.type_desc,
								},
								{
									title: '公司名称',
									value: infos.title,
								},
								{
									title: '公司税号',
									value: infos.duty_num,
								},
							]
						}
						else if(infos.title_type == 0){  // 个人
							this.IssueList = [{
									title: '发票类型',
									value: infos.type_desc,
								},
								{
									title: '名称',
									value: infos.title,
								},
								{
									title: '联系电话',
									value: infos.mobile,
								},
							]
						}
						
					}
				})
			},
			// 确定申请
			pupConfirm() {
				let obj = this.apply_data
				obj.action = 'order'
				api_invoice_apply(obj).then(res=>{
					let {id} = res
					uni.setStorageSync('invoic_select_list', '')
					uni.redirectTo({
						url: '/bundle4/pages/invoice/oinvoires'
					})
				})
				
			},
		
			// 选择抬头确定
			selectcur(res){
				this.invoice_info = res
			},

			amountDetail() {
				uni.navigateTo({
					url: '/bundle4/pages/invoice/oinvodetail'
				})
			},
		},
	}
</script>


<style lang="scss" scoped>
	@import "@/bundle4/css/Flex.scss";
	@import "./css/oinvo.scss";
	
	.notes_box{
		.notes_head{
			width: 100%;
			margin-bottom: 26rpx;
			padding-top: 48rpx;
			.head_left{
				.tit{
					font-size: 28rpx;
					font-weight: 400;
					color: rgba(38, 38, 38, 1);
					margin-right: 12rpx;
				}
				.txt{
					font-size: 24rpx;
					font-weight: 400;
					color: rgba(166, 166, 166, 1);

				}
			}
			.fontNum{
				font-size: 24rpx;
				font-weight: 400;
				color: rgba(166, 166, 166, 1);
				text-align: right;
			}
		}
		textarea{
			width: 100%;
			height: 150rpx;
			// border:solid 1px red;
			padding-bottom: 10rpx;
			font-size: 24rpx;
			font-weight: 400;
			line-height: 28.12rpx;
			color: rgba(166, 166, 166, 1);
			text-align: left;
		}
	}

	.Issue_content {
		width: 100%;

		.Issue_text {
			padding-top: 24rpx;
			border-top: solid 1px #E2E2E2;
			font-size: 24rpx;
			font-weight: 400;
			color: #003232;
		}
	}

	.TotalAmount {
		padding: 40rpx 35rpx 30rpx 35rpx;

		.amount_head {
			width: 100%;
			margin-bottom: 26rpx;

			.head_left {
				.tit {

					font-size: 28rpx;
					font-weight: 400;
					color: rgba(38, 38, 38, 1);
					margin-right: 55rpx;
				}

				.price {
					font-size: 28rpx;
					font-weight: 400;

					.num {
						color: #03ADAD;
						font-size: inherit;
					}

					.unit {
						color: rgba(102, 102, 102, 1);
						font-size: inherit;
						margin-left: 4rpx;
					}
				}
			}

			.rmore {
				font-size: 28rpx;
				font-weight: 400;
				color: rgba(166, 166, 166, 1);

				i {
					color: #999999;
					font-size: 20rpx;
					margin-left: 10rpx;
				}
			}
		}

		.amount_txt {
			width: 100%;
			font-size: 24rpx;
			font-weight: 400;
			line-height: 36rpx;
			color: rgba(166, 166, 166, 1);

		}
	}

	.checkbox {
		width: 34rpx;
		height: 34rpx;
		border-radius: 100%;
		background: #fff;
		border: solid 2rpx #CCCCCC;

		&.ischeck {
			border-color: #3270E0;
			background: #3270E0;
		}

		i {
			color: #fff;
			font-size: 24rpx;
		}
	}
</style>